<template>
  <div class="buy">
    <van-nav-bar
      title="提交订单"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
      <div class="header">
        <div class="a">
        <div class="one">
              <h3 @click="request_addresslist" >姓名：小美女<span @click="$router.push('/addAddress')">></span></h3>
        <!-- 渲染数据 -->
              <p>电话177******27</p>
          </div>
          <div class="two">
              <span>立即送出</span>
              <span class="aa">预计晚上送昂达</span>
          </div>
          <div class="three">
            <span>支付方式</span>
              <span class="aa">余额支付</span>
          </div>
        </div>



         
          
      </div>
        <div v-for="(item, index) in shopcartlist" :key="index" class="good">
              <div class="imgbox">
                <img :src="item.picture" alt="" />
              </div>

               <div class="text">
                <div class="name">{{ item.name }}</div>
                <div class="pb">
                  <span>¥{{ item.min_price }}</span>              
                  <div>
                    <span @click="sub(item)">-</span>
                    <span>{{ item.count }}</span>
                    <span @click="add(item)">+</span>
                  </div>
              </div>
              
            </div>
          </div>

          <div class="qian">
            <span> <van-icon name="cart" /> 总数{{totalCount}} 总价{{totalPrice}}</span>
            <button>去结算</button>
        
          </div>
       
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState,mapActions } from "vuex";
export default {
    data(){
        return{
            visible: false,
        }
    },
    
 methods:{
    onClickLeft() {
      this.$router.go(-1);
    },
    ...mapActions(['request_addresslist']),
    changeVisible() {
      this.visible = !this.visible; //让购物车显示/隐藏
    },
     },
computed:{
        ...mapState(['shopcartlist','addressslist','addressslist']),
        totalCount(){
            var sum = 0;
            this.shopcartlist.forEach((item)=>{
                sum += item.count;
            })
            return  sum
        },
   totalPrice(){
            var sum = 0;
            this.shopcartlist.forEach((item)=>{
                sum += item.count * item.min_price
            })
            return parseInt(sum) 
        }
     },
    
}
</script>

<style lang="scss" scoped>
   *{
       margin: 0;
       padding: 0;
   }
   .buy{
       .header{
        background-color: aqua;
        width: 100%;
       }
        .a{
           width: 90%;
           margin-left: 12px;
        //    justify-content: center;
        // align-items: center;
           border-radius: 20px;
            display: flex;
            flex-direction: column;
            background-color: #f5f5f5;
            padding: 0 5px;
            .aa{
                float: right;
                color: rgb(51, 31, 204);
                font-size: 14px;
            }
            .one{
                 padding: 0 5px;
                 h3{
                   span{
                     margin-left: 40px;
                   }
                 }
                p{
                    padding: 5px 0;
                }
                
            }
        }
   }
   .text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left:10px ;
}
.pb{
    width: 250px;
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
}
.imgbox {
  width: 80px;
  height: 80px;
  img {
    width: 100%;
  }
}
.good {
  display: flex;
  margin: 20px 0;
  height: 65px;
  }
  .qian{
      display: flex;
       justify-content: flex-end;
       padding: 0 20px;
       button{
           margin: 0 10px;
           padding: 4px;
           border-radius: 5px;
           background-color: rgb(12, 166, 227);
       }
  }
  .message{
      width: 100%;
      height: 100%;
      background-color: cadetblue;
  }
</style>